﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSTree.aspx.cs" Inherits="DemoApplication.JSTree" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jq/jquery-1.8.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div_test">
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    function SendAjax(reqtype, requrl, reqdata, datatype, callback) {
        $.ajax({
            type: reqtype,
            async: true,
            url: requrl,
            dataType: datatype == "" ? "text" : datatype,
            data: reqdata,
            cache: false,
            success: callback,
            error: function (jqXHR, textStatus, errorThrown) {
                alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
            }

        });
    }

    function JSNode(id, caption, url) {
        this.id = id;
        this.caption = caption;
        this.depth = 0;
        this.url = url;
        this.children = new Array();

        this._isExpanded = false;
        this._containerEl = null;

        this._hasLoadedChildren = false;

        this.AddNode = function (node) {
            this.children.push(node);
            node.id = this.id + this.children.length;
            node.depth = this.depth + 1;
        }

        this.expand = function () {
            var that = this;
            if (!this._hasLoadedChildren) {
                //数据格式[{id:123,caption:'aaa_1',url:'www.baidu1.com'},       {id:222,caption:'aaa_2',url:'www.baidu2.com'}]
                SendAjax("get", "TreeAjax.aspx", { tag: "gettreedata", id: this.id }, "", function (data) {
                    that.oncallback(that,data);
                });
            } else {
                this._containerEl.style.display = '';
                this._isExpanded = true;
            }
        }

        this.collapse = function () {
            this._containerEl.style.display = 'none';
            this._isExpanded = false;
        }

        this.Render = function (container) {
            var html = "";
            var root = document.createElement("div");
            root.id = this.id;
            root.style.marginLeft = "30px";

            var node_caption = document.createElement("div");
            var node_icon = document.createElement("span");
            node_icon.innerText = "+";
            node_caption.appendChild(node_icon);

            node_icon.node = this;
            node_icon.onclick = function () {
                if (this.node._isExpanded) {
                    this.node.collapse();
                } else {
                    this.node.expand();
                }
            }

            var a = document.createElement("a");
            a.href = this.url;
            a.innerText = this.caption;
            node_caption.appendChild(a);

            var node_container = document.createElement("div");
            this._containerEl = node_container;
            node_container.id = this.id + "_container";
            node_container.style.display = 'none';

            root.appendChild(node_caption);
            root.appendChild(node_container);

            for (var i = 0; i < this.children.length; i++) {
                this.children[i].Render(node_container);
            }
            container.appendChild(root);
        }

        this.oncallback = function (node, data) {
            var data = eval("(" + data + ")");
            for (var i = 0; i < data.length; i++) {
                var jsNode = new JSNode(data[i].id, data[i].caption, data[i].url);
                node.AddNode(jsNode);
                jsNode.Render(node._containerEl);
            }
            this._hasLoadedChildren = true;
            this.expand();
        }
    }
    var Root = new JSNode("1", "aaa", "http://www.baidu.com");
    Root.Render(document.getElementById("div_test"));
</script>
